<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <h3 class="app-page-h3-title">
        rs-count计数
      </h3>
      <div class="app-section">
        <ul class="rs-count">
          <li class="layer1">
            <span>layer01</span>
            <ul>
              <li class="layer2">
                layer01
              </li>
              <li class="layer2">
                layer02
              </li>
              <li class="layer2">
                layer03
              </li>
              <li class="layer2">
                layer04
              </li>
              <li class="layer2">
                layer05
              </li>
            </ul>
          </li>
          <li class="layer1">
            <span>layer02</span>
            <ul>
              <li class="layer2">
                layer01
              </li>
              <li class="layer2">
                layer02
              </li>
              <li class="layer2">
                layer03
              </li>
              <li class="layer2">
                layer04
              </li>
              <li class="layer2">
                layer05
              </li>
            </ul>
          </li>
          <li class="layer1">
            <span>layer03</span>
            <ul>
              <li class="layer2">
                layer01
              </li>
              <li class="layer2">
                layer02
              </li>
              <li class="layer2">
                layer03
              </li>
              <li class="layer2">
                layer04
              </li>
              <li class="layer2">
                layer05
              </li>
            </ul>
          </li>
          <li class="layer1">
            <span>layer04</span>
            <ul>
              <li class="layer2">
                layer01
              </li>
              <li class="layer2">
                layer02
              </li>
              <li class="layer2">
                layer03
              </li>
              <li class="layer2">
                layer04
              </li>
              <li class="layer2">
                layer05
              </li>
            </ul>
          </li>
          <li class="layer1">
            <span>layer05</span>
            <ul>
              <li class="layer2">
                layer01
              </li>
              <li class="layer2">
                layer02
              </li>
              <li class="layer2">
                layer03
              </li>
              <li class="layer2">
                layer04
              </li>
              <li class="layer2">
                layer05
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
// 计数
.rs-count {
  counter-reset: item;
  li {
    padding-left: 2em;
  }
  .layer1 {
    counter-increment: item;
    counter-reset: child;
    &::before {
      content: counter(item) ".";
      color: #f00;
    }
    .layer2 {
      counter-increment: child;
      &::before {
        content: counter(item) "." counter(child) ".";
        color: green;
      }
    }
  }
}
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 计数
.rs-count {
  counter-reset: item;
  li {
    padding-left: 2em;
  }
  .layer1 {
    counter-increment: item;
    counter-reset: child;
    &::before {
      content: counter(item) ".";
      color: #f00;
    }
    .layer2 {
      counter-increment: child;
      &::before {
        content: counter(item) "." counter(child) ".";
        color: green;
      }
    }
  }
}
</style>
